@include('Admin.public.head')
<style>
.am-btn-toolbar
{
    margin-top: 5px;
}
#credit2_see a
{
    background: #e4a25e;
    border: 1px solid #e4a25e;
}
/* #my-popups_credit2
{
    overflow: auto;
} */
</style>
<body>
@include('Admin.public.menu')
<div class=" admin-content" id="app">
    {{ csrf_field() }}
    <div class="daohang">

    </div>
    <!--模态框-->
    <div class="am-modal am-modal-no-btn" tabindex="-1" id="my-popup">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">门店订单
                <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
            </div>

            <table class="am-table am-table-bordered am-table-striped am-table-compact">
                <thead>
                <tr>
                    <td>商品名称</td>
                    <td>商品规格</td>
                    <td>商品价格</td>
                    <td>数量</td>
                    <td>购买时间</td>
                    {{--<td>操作</td>--}}
                </tr>
                </thead>

                <tbody>
                <tr class="am-active">
                    <td>@{{orderDetail.goods_name}}</td>
                    <td>@{{orderDetail.specs}}</td>
                    <td>@{{orderDetail.price}}</td>
                    <td>@{{orderDetail.total_quantity}}</td>
                    <!-- 下单时间？ -->
                    <td>@{{orderDetail.paytime}}</td>
                </tr>
                </tbody>
            </table>

        </div>
    </div>
    <div class="admin-biaogelist">
        <div class="listbiaoti am-cf">
            <ul class="am-icon-flag on"> 进货记录</ul>
            <dl class="am-icon-home" style="float: right;">当前位置： 首页 > <a href="#">进货记录</a></dl>
            <!--这里打开的是新页面-->
        </div>
        <div class="am-btn-toolbars am-btn-toolbar am-kg am-cf">
            <ul>

                <li>
                    <div class="block">
                        <el-date-picker
                                v-model="keyword.createtime"
                                type="daterange"
                                value-format="yyyy-MM-dd"
                                range-separator="~"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </li>

                <li>
                    <template>
                        <el-select v-model="keyword.status" placeholder="进货状态">
                            <el-option
                                    size="medium"
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </li>
                <li>
                    <el-input v-model="keyword.keyword" class="keywords" placeholder="关键词搜索"></el-input>
                </li>
                <li>
                    <el-button type="primary" v-on:click="search()">搜索</el-button>
                </li>
                <li>
                    <el-button type="success" v-on:click="exportUser()">导出</el-button>
                </li>
                <li>
                    <el-button type="danger" v-on:click="resetOrder()">重置</el-button>
                </li>
            </ul>
        </div>

        <form class="am-form am-g">
            <table width="100%" class="am-table am-table-bordered am-table-radius am-table-striped am-table-hover">
                <thead>
                <tr class="am-success">
                    {{--<th>ID</th>--}}
                   <!--  <th>是否报单</th> -->
                    <th>门店编号</th>
                    <th>门店名称</th> 
                    <th>进货人</th>
                    <th>进货编号</th>
                    <th>商品名</th>
                    <th>商品总价</th>
                    <th>邮费</th>
                    <th>总金额</th>
                    <th>总数量</th>
                    {{--<th>电话</th>--}}
                    <th>进货状态</th>
                    {{--<th>运费</th>--}}
                    <th>收货姓名</th>
                    <th>收货地址</th>
                    <th>收货电话</th>
                    {{--<th>快递名称</th>--}}
                    {{--<th>快递单号</th>--}}
                    <!-- <th>备注</th> -->
                    <th>下单时间</th>
                    <th>支付时间</th>
                    <th>快递时间</th>
                    @can('order-operation')
                    <th width="130px" class="table-set">操作</th>
                    @endcan
                <!--权限管理-->
                </tr>
                </thead>
                <tbody>


                <!--Marlin update-->
                <tr v-for="val,index in orderList">

                    {{--<td>@{{ val.id }}</td>--}}
                    
                    <td>@{{val.stores_num}}</td>
                    <td>@{{val.stores_name}}</td>
                    <td>@{{val.name}}</td>
                    <td>@{{val.ordersn}}</td>
                    <td>@{{val.goods_name}}</td>
                    <td>@{{val.total_price}}</td>
                    <td>@{{val.postage}}</td>
                    <td>@{{val.total}}</td>
                    <td>@{{val.total_quantity}}</td>
                    <td>
                        <!-- <span style="color:red;">待付款</span> -->
                        <span v-show="val.status == 1" style="color:green;">已付款</span>
                        <span v-show="val.status == 2">已发货</span>
                        <span v-show="val.status == 3">交易完成</span>
                    </td>
                    <td>@{{val.consignee}}</td>
                    <td>@{{val.address}}</td>
                    <td>@{{val.phone}}</td>
                    {{--<td>@{{ val.expressage }}</td>--}}
                    <td>@{{val.created_at}}</td>
                    <td>@{{val.paytime}}</td>
                    <td>@{{val.express_time}}</td>
                    @can('order-operation')
                    <td>
                        <div class="am-btn-toolbar">
                            <div class="am-btn-group am-btn-group-xs"
                                 data-am-modal="{target: '#my-popup',width:1000,height: 1000}">
                                 <!-- v-on:click="detail(val,index)" -->
                                <a v-show="val.specs_txt != null" data-am-modal="{target: '#my-popup',height: 300}" class="am-btn am-btn-success" v-on:click="detail(val.id,index)">
                                    <span class="am-icon-search" title="查看订单详情"> 查看</span>
                                </a>
                                {{--<button class="am-btn am-btn-default am-btn-xs am-text-secondary am-round" data-am-modal="{target: '#my-popups'}" title="修改订单"><span class="am-icon-pencil-square-o"></span></button>--}}

                                {{--<button class="am-btn am-btn-default am-btn-xs am-text-secondary am-round" data-am-modal="{target: '#my-popups'}" title="确认收货"><span class="am-icon-pencil-square-o"></span></button>--}}
                            </div>
                        </div>

                        <div class="am-btn-toolbar" id="credit2_see" v-show="val.status == 1">
                            <div class="am-btn-group am-btn-group-xs">
                                <a class="am-btn am-btn-success" v-on:click="affirmShipments(index,val.id)">
                                    <span>确认发货</span>
                                </a>
                            </div>
                        </div>
                        <div class="am-btn-toolbar" id="credit2_see" v-show="val.status == 2">
                            <div class="am-btn-group am-btn-group-xs">
                                <span>待收货</span>
                            </div>
                        </div>

                        <div class="am-btn-toolbar" id="credit2_see" v-show="val.status == 3">
                            <div class="am-btn-group am-btn-group-xs">
                                <span>已确认收货</span>
                            </div>
                        </div>

                    </td>
                    @endcan
                </tr>
                </tbody>
            </table>
            <!-- 总额:<span class="am-badge am-badge-danger am-radius">@{{ total }}</span> -->
            <!--分页-->
            <ul class="am-pagination am-fr">
                <div class="block">
                    <el-pagination
                            background
                            :page-size="PagesData.per_page"
                            :current-page="PagesData.current_page"
                            layout="total , prev, pager, next"
                            :total="PagesData.total"
                            @prev-click="changeClick"
                            @next-click="changeClick"
                            @current-change="changeClick">
                    </el-pagination>
                </div>
            </ul>
        </form>
    </div>
</div>
</div>
<script src="{{ URL::asset('js/admin/amazeui.min.js') }}"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            
            options: [{
                value: '0',
                label: '待付款'
            }, {
                value: '1',
                label: '已付款'
            }, {
                value: '2',
                label: '已发货'
            }, {
                value: '3',
                label: '交易完成'
            }],
            total: '',
            orderList: [], //订单列表
            orderDetail: {},//订单详情
            PagesData: [],//分页
            pase: '',
            keyword: { //关键字搜索
                // ordertype: '',
                //is_first:'',
                createtime: '',
                status: '',
                keyword: '',
            },
            index: '', //数组下标
        },
        //事件
        methods: {
            //选择当前页
            changeClick: function (e) {
                var rico = this
                $.get("/admin/stores/getPurchase", {
                    '_token': '{{csrf_token()}}',
                    class: 'select',
                    page: e,
                    // keyword: app.keyword
                }, function (res) {
                    if (res.code) {
                        app.orderList = res.data.data
                        app.total = res.total;
                        app.PagesData = res.data
                    } else {
                        layer.msg(res.data);
                    }
                });
            },
            initialize: function () {
                $.post("/admin/stores/getPurchase", {'_token': '{{csrf_token()}}', class: 'select'}, function (res) {
                    // console.log(res)
                    if (res.code) {
                        app.orderList = res.data.data;
                        app.total = res.total;
                        app.PagesData = res.data;
                        app.pase = res.data.current_page;
                    } else {
                        layer.msg(res.data);
                    }
                });

            },
            //订单详情
            detail: function (id, index) {
                // console.log(id)
                // app.index = index;
                $.post("/admin/stores/getPurchase", {'_token': '{{csrf_token()}}', class: 'specs', id: id}, function (res) {
                    console.log(res)
                    if (res.code) {
                        app.orderDetail = res.data;
                    } else {
                        layer.msg(res.data);
                    }
                });
            },
            //确认发货
            affirmShipments: function (index,id) {
                $.post("/admin/stores/getPurchase", {
                    '_token': '{{csrf_token()}}',
                    class: 'confirm',
                    id: id
                }, function (res) {
                    // console.log(res)
                    if (res.code) {
                        // app.orderList[index].status = 2
                        location.reload();
                    } else {
                        layer.msg(res.data);
                    }
                });
            },
            // 搜索
            search: function () {
                // console.log(app.keyword)
                $.post("/admin/stores/getPurchase", {
                    '_token': '{{csrf_token()}}',
                    class: 'select',
                    keyword:app.keyword
                }, function (res) {
                    // console.log(res)
                    if (res.code) {
                        app.orderList = res.data.data;
                        app.total = res.total;
                        app.PagesData = res.data;
                        app.pase = res.data.current_page;
                    } else {
                        layer.msg(res.data);
                    }
                });
            },

            //导出
            exportUser: function () {
                location.href = "/admin/order/exportOrder?createtime=" + app.keyword.createtime + '&keyword=' + app.keyword.keyword;
            },
            //重置
            resetOrder: function () {

                location.reload();
            }

        },
        //自动执行
        mounted: function () {
            this.initialize();
        },
    })
</script>
<!--<![endif]-->
@include('Admin.public.foot')

